<template>
	<view class="page_content" style="background-color: #F8FBFF;height: 100vh;">
		<view v-if="merchantData.mercType==3||merchantData.mercType==4" class="upImgItem">
			<view class='pictrue'>
				<view>门头照</view>
				<view class="img" @click='uploadpic(0)' :style="{'background-image': `url(${imgShopFool})`}">
					<text class='iconfont icon-icon25201'></text>
				</view>
			</view>
			<view style="width: 40rpx;"></view>
			<view class='pictrue'>
				<view>营业执照</view>
				<view class="img" @click='uploadpic(1)' :style="{'background-image': `url(${imgShopBus})`}">
					<text class='iconfont icon-icon25201'></text>
				</view>
			</view>
		</view>
		
		<view v-if="merchantData.mercType==3||merchantData.mercType==4" class="upImgItem" style="margin-top: 20rpx;">
			<view class='pictrue'>
				<view>经营场所照</view>
				<view class="img" @click='uploadpic(2)' :style="{'background-image': `url(${imgShopSpace})`}">
					<text class='iconfont icon-icon25201'></text>
				</view>
			</view>
			<view style="width: 40rpx;"></view>
			<view class='pictrue'>
				<view>收银台照</view>
				<view class="img" @click='uploadpic(3)' :style="{'background-image': `url(${imgShop})`}">
					<text class='iconfont icon-icon25201'></text>
				</view>
			</view>
		</view>
		
		<view class="upImgItem" style="margin-top: 20rpx;">
			<view class='pictrue'>
				<view>身份证正面</view>
				<view class="img" @click='uploadpic(4)' :style="{'background-image': `url(${idCardOn})`}">
					<text class='iconfont icon-icon25201'></text>
				</view>
			</view>
			<view style="width: 40rpx;"></view>
			<view class='pictrue'>
				<view>身份证反面</view>
				<view class="img" @click='uploadpic(5)' :style="{'background-image': `url(${idCardOff})`}">
					<text class='iconfont icon-icon25201'></text>
				</view>
			</view>
		</view>
		
		<view v-if="merchantData.stlAccType==11" class="upImgItem" style="margin-top: 20rpx;">
			<view class='pictrue'>
				<view>银行卡正面</view>
				<view class="img" @click='uploadpic(6)' :style="{'background-image': `url(${bankOn})`}">
					<text class='iconfont icon-icon25201'></text>
				</view>
			</view>
			<view style="width: 40rpx;"></view>
			<view class='pictrue'>
				<view>银行卡反面</view>
				<view class="img" @click='uploadpic(7)' :style="{'background-image': `url(${bankOff})`}">
					<text class='iconfont icon-icon25201'></text>
				</view>
			</view>
		</view>
		
		<view v-if="merchantData.stlAccType==21" class="upImgItem" style="margin-top: 20rpx;">
			<view class='pictrue'>
				<view>开户证明</view>
				<view class="img" @click='uploadpic(8)' :style="{'background-image': `url(${creatAccount})`}">
					<text class='iconfont icon-icon25201'></text>
				</view>
			</view>
			<view style="width: 40rpx;"></view>
			<view class='pictrue'>
				
			</view>
		</view>
		
		<view v-if="merchantData.isUncrpSett==0">
			<view class="upImgItem" style="margin-top: 20rpx;">
				<view class='pictrue'>
					<view>被授权人身份证正面</view>
					<view class="img" @click='uploadpic(9)' :style="{'background-image': `url(${authUserOn})`}">
						<text class='iconfont icon-icon25201'></text>
					</view>
				</view>
				<view style="width: 40rpx;"></view>
				<view class='pictrue'>
					<view>被授权人身份证反面</view>
					<view class="img" @click='uploadpic(10)' :style="{'background-image': `url(${authUserOff})`}">
						<text class='iconfont icon-icon25201'></text>
					</view>
				</view>
			</view>
			
			<view class="upImgItem" style="margin-top: 20rpx;">
				<view class='pictrue'>
					<view>法人手持结算授权书</view>
					<view class="img" @click='uploadpic(11)' :style="{'background-image': `url(${authUserBook})`}">
						<text class='iconfont icon-icon25201'></text>
					</view>
				</view>
				<view style="width: 40rpx;"></view>
				<view class='pictrue'>
					<view >
						结算授权书
						<text class="btn" @click="saveImage">模版</text>
					</view>
					<view class="img" @click='uploadpic(12)' :style="{'background-image': `url(${authBook})`}">
						<text class='iconfont icon-icon25201'></text>
					</view>
				</view>
			</view>
			
			<view class="upImgItem" style="margin-top: 20rpx;">
				<view class='pictrue'>
					<view>备用结算账户正面</view>
					<view class="img" @click='uploadpic(13)' :style="{'background-image': `url(${standBank})`}">
						<text class='iconfont icon-icon25201'></text>
					</view>
				</view>
				<view style="width: 40rpx;"></view>
				<view class='pictrue'>
					
				</view>
			</view>
		</view>
		
		<button class='submitBtn' @click="submitInfo">提交审核</button>
	</view>
</template>

<script>
	import { submitApplyAllApi } from '@/api/apply.js'
	import { initCustomFormatter } from "vue";
	import Cache from '@/utils/cache';
	
	const app = getApp();
	export default {
		data() {
			return {
				urlDomain: this.$Cache.get("imgHost"),
				imageType: [
					{name: '商户门头照', value: 'A006'},
					{name: '营业执照图片', value: 'A001'},
					{name: '经营场所照', value: 'A007'},
					{name: '商户收银台照', value: 'A008'},
					{name: '身份证人像面', value: 'A002'},
					{name: '身份证国徽面', value: 'A003'},
					{name: '银行卡正面', value: 'A004'},
					{name: '银行卡反面', value: 'A005'},
					{name: '开户许可证', value: 'A011'},
					{name: '被授权人身份证人像面', value: 'A013'},
					{name: '被授权人身份证国徽面', value: 'A014'},
					{name: '法人手持结算授权书', value: 'B004'},
					{name: '结算授权书', value: 'B005'},
					{name: '备用结算账户正面', value: 'A0041'},
				],
				imgShopFool: '',	//商户门头照
				imgShopBus: '',		//营业执照图片
				imgShopSpace: '',	//经营场所照
				imgShop: '',		//商户收银台照
				idCardOn:  '',		//身份证人像面
				idCardOff: '',		//身份证国徽面
				bankOn: '',		//银行卡正面
				bankOff: '',		//银行卡反面
				creatAccount: '',	//开户许可证
				authUserOn: '',		//被授权人身份证人像面
				authUserOff: '',	//被授权人身份证国徽面
				authUserBook: '',	//法人手持结算授权书
				authBook: '',		//结算授权书
				standBank: '',		//备用结算账户正面
				merchantData: JSON.parse(this.$Cache.get('applyInfo')),
				imageArr: [],
				isLoading: false
			}
		},
		onLoad() {
			this.getUserApplyInfo();
		},
		methods: {
			initData: function() {
				let that = this;
				that.imgShopFool = that.urlDomain+ 'crmebimage/presets/normalImg.png';
				that.imgShopBus = that.urlDomain+ 'crmebimage/presets/normalImg.png';
				that.imgShopSpace = that.urlDomain+ 'crmebimage/presets/normalImg.png';
				that.imgShop = that.urlDomain+ 'crmebimage/presets/normalImg.png';
				that.idCardOn = that.urlDomain+ 'crmebimage/presets/idCardOn.png';
				that.idCardOff = that.urlDomain+ 'crmebimage/presets/idCardOff.png';
				that.bankOn = that.urlDomain+ 'crmebimage/presets/bankCardOn.png';
				that.bankOff = that.urlDomain+ 'crmebimage/presets/bankCardOff.png';
				that.creatAccount = that.urlDomain+ 'crmebimage/presets/normalImg.png';
				that.authUserOn = that.urlDomain+ 'crmebimage/presets/idCardOn.png';
				that.authUserOff = that.urlDomain+ 'crmebimage/presets/idCardOff.png';
				that.authUserBook = that.urlDomain+ 'crmebimage/presets/normalImg.png';
				that.authBook = that.urlDomain+ 'crmebimage/presets/normalImg.png';
				that.standBank = that.urlDomain+ 'crmebimage/presets/bankCardOn.png';
				
				if(that.merchantData.type!=null&&that.merchantData.type!=''){
					that.disabled = that.merchantData.type==3;
				} 
				if(that.merchantData.imgArray!=null&&that.merchantData.imgArray.length>0){
					let imgArr = JSON.parse(that.merchantData.imgArray);	
					console.log(imgArr);
					for(let i=0;i<imgArr.length;i++){
						let item = imgArr[i];
						if(item.type==that.imageType[0].value){
							that.imgShopFool = item.url;
						}
						if(item.type==that.imageType[1].value){
							that.imgShopBus = item.url;
						}
						if(item.type==that.imageType[2].value){
							that.imgShopSpace = item.url;
						}
						if(item.type==that.imageType[3].value){
							that.imgShop = item.url;
						}
						if(item.type==that.imageType[4].value){
							that.idCardOn = item.url;
						}
						if(item.type==that.imageType[5].value){
							that.idCardOff = item.url;
						}
						if(item.type==that.imageType[6].value){
							that.bankOn = item.url;
						}
						if(item.type==that.imageType[7].value){
							that.bankOff = item.url;
						}
						if(item.type==that.imageType[8].value){
							that.creatAccount = item.url;
						}
						if(item.type==that.imageType[9].value){
							that.authUserOn = item.url;
						}
						if(item.type==that.imageType[10].value){
							that.authUserOff = item.url;
						}
						if(item.type==that.imageType[11].value){
							that.authUserBook = item.url;
						}
						if(item.type==that.imageType[12].value){
							that.authBook = item.url;
						}
						if(item.type==that.imageType[13].value){
							that.standBank = item.url;
						}
					}
				}
			},
			getUserApplyInfo() {
				let that = this;
				getUserApplyInfoApi().then(res =>{
					let data = res.data;
					//更新缓存
					Cache.set("upgradeInfo", res.data);
					that.merchantData = JSON.parse(that.$Cache.get('applyInfo'));
					//进行数据初始化
					that.initData();
				});
			},
			/**
			 * 上传文件
			 *
			 */
			uploadpic: function(index) {
				let that = this;
				that.$util.uploadYsImageOne({
					url: 'epay/ysadmartupload',
					name: 'multipart',
					type: that.imageType[index].value,
					sysFlowId: that.merchantData.sysFlowId,
					picNm: that.imageType[index].name
				}, function(res) {
					console.log(res);
					if(index==0){
						that.imgShopFool = res;
					}
					if(index==1){
						that.imgShopBus = res;
					}
					if(index==2){
						that.imgShopSpace = res;
					}
					if(index==3){
						that.imgShop = res;
					}
					if(index==4){
						that.idCardOn = res;
					}
					if(index==5){
						that.idCardOff = res;
					}
					if(index==6){
						that.bankOn = res;
					}
					if(index==7){
						that.bankOff = res;
					}
					if(index==8){
						that.creatAccount = res;
					}
					if(index==9){
						that.authUserOn = res;
					}
					if(index==10){
						that.authUserOff = res;
					}
					if(index==11){
						that.authUserBook = res;
					}
					if(index==12){
						that.authBook = res;
					}
					if(index==13){
						that.standBank = res;
					}
				});
			},
			saveImage() {
				uni.getImageInfo({
					src: this.urlDomain + 'crmebimage/presets/jssqs.jpg',
					success: function(sres) {
						console.log('图片信息', sres.path);
						uni.saveImageToPhotosAlbum({
							filePath: sres.path,
							// 保存成功，直接给出提示
							success: (res) => {
								uni.showModal({
									title: '提示',
									content: "已保存到本地相册，请打开相册扫描",
									showCancel: false,
									confirmText: "好的"
								})
							},
							// 保存失败，判断是否授权，未授权则调用授权，否则弹出失败信息
							fail(err) {
								console.error(err);
								if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg ===
									"saveImageToPhotosAlbum:fail authorize no response" || err.errMsg ===
									"saveImageToPhotosAlbum:fail auth denied") { // 没有授权，重新授权，兼容iso和Android
									uni.showModal({
										title: '授权提示',
										content: "是否允许获取保存相册权限",
										success: (res) => {
											if (res.confirm) { // 点击确定，则调用相册授权
												uni.openSetting({
													success(settingdata) {
														if (settingdata.authSetting[
																"scope.writePhotosAlbum"
															]) {
															console.log(
																"获取权限成功，再次点击图片保存到相册"
															)
															uni.showToast({
																title: '授权成功，请重试哦~'
															});
														} else {
															console.log("获取权限失败")
															uni.showToast({
																title: '请确定已打开保存权限',
																icon: "none"
															});
														}
													}
												})
											}
										}
									})
								} else if (err.errMsg === "saveImageToPhotosAlbum:fail file not found" ||
									err.errMsg ===
									"saveImageToPhotosAlbum:fail file not exists" || err.errMsg ===
									"saveImageToPhotosAlbum:fail get file data fail"
								) { // 无图片，则提示
									uni.showToast({
										title: '暂无图片',
										icon: "none"
									});
								}
							}
						})
					}
				})
					 
			},
			submitInfo: function() {
				if(this.isLoading) return;
				this.isLoading = true;
				submitApplyChangeAllApi(this.merchantData).then(res =>{
					this.isLoading = false;
					uni.switchTab({
						url: '/pages/user/index'
					});
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.upImgItem{
		display: flex;
		background-color: #fff;
		padding: 20rpx 32rpx;
	}
	.pictrue{
		flex: 1;
		
		.img{
			border-radius: 10rpx;
			height: 180rpx;
			text-align: center;
			line-height: 180rpx;
			margin-top: 20rpx;
			background-size: 100% 100%;
		}
	}
	.submitBtn {
		width: 588rpx;
		margin: 25px auto 25px auto;
		height: 86rpx;
		border-radius: 25px;
		text-align: center;
		line-height: 86rpx;
		font-size: 15px;
		color: #fff;
		@include main_bg_color(theme);
	}
	.submitBtn.on {
		@include main_bg_color(theme);
	}
</style>